<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../fonts/iconfont.css">
		<title></title>
		<style>
			
			.mui-navbar-inner {
				background: #000000;
				
			}
			.mui-title {
				color: #FFFFFF;
			}
			.index {
				margin-top: 1vw;
				display: flex;
			}

			.mui-content {
				background: #000000;
				color: #FFFFFF;
				width: 100vw;
				overflow: hidden;
			}

			.iconfont {
				margin-left: 2vw;
			}

			.time {
				margin-left: 2vw;
				float: left;
				font-size: 1vw;
				color: #D8D8D8;
				flex:0 0 70%
			}

			.give {
				flex:0 0 30%
				
			}
			
			.user-parent {
				position: relative;
				margin-top: 1vw;
				margin-left: 2vw ;
				}
			.user-heard {
				color: #FFE5D9;
				position: absolute; top: 1vw; left: 2.5rem; margin-top: 1vw;width: 30vw; overflow: hidden;
			}
			.user-icon {
				margin-top: 1vw; border-radius: 20vw;
			}
			.user-name {
				font-size:4vw;
			}
			.message {
				padding:2vw;
				text-indent:2em;
				padding:2vw;
				font-size: 4.5vw;
			}
			
			.title{
				color: #FFE5D9;
				white-space:nowrap; 
				text-overflow:ellipsis;
				overflow:hidden;
				float: left;
				width: 60vw;
				height: 15vw;
				margin-left: 3vw;
				font-size: 4vw;
			}
			.xsd{
				color: #FFE5D9;
				font-size: 1vw;float: right;
				bottom: 0vw;
				right: 10vw;
				position: absolute;
			}
			.shibie { 
				color: #FFE5D9;
				margin-top: 2vw;
				margin-left: 2vw;
				font-size: 4vw;
			}
			.recog {
				background: #000;
				margin: 3vw auto;
				font-size: 5vw;
				margin: 2vw;
				border-radius: 3vw;
				color: #007AFF;
				border: #FFF2F2 1px solid;
				text-align: center;
				list-style-type: none;
				line-height: 12vw;
			}
			.recog img{
				float: left;
				border-radius: 5px;
				width: 16vw;
				height: 16vw;
			}
			li {
				 list-style: none;
			}
			.parse {
				color: #F0AD4E;
			}
		</style>
	</head>
	<body>
		<!--页面标题栏开始-->
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button> 
			<h1 id="title" class="mui-center mui-title">标题</h1>
		</div>
		<div id="refreshContainer" class=" mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<img id="img" style="width: 100%;" src="../../images/slider2.jpeg" />
				<div class="index">
					<div id="time" class="time">2023.06.11 </div>
					<div class="give" style="float: left;">
						<span id="parse" class="iconfont">&#xe605;</span>
						<span id="praised">0</span>
						<span class="iconfont">&#xe711;</span>
						<span id="total">0</span>
					</div>
				</div>
				<div class="user-parent" style="position: relative;">
					<img id="userImg" class="user-icon" src="../../images/slider5.jpg" width="30px" height="30px">
					<div class="user-heard">
						<div id="username" class="user-name">普通用户</div>
					</div>
				</div>
				<div class="shibie"></div>
				<div id="message" class="message"> 
				内容
				</div>
				
				<div class="shibie">识别结果:</div>
				<div id="jieguo">
				
				</div>
				<div style="position: relative;">
				<div class="shibie" >用户留言:</div>
				<img id="userIcon" class="user-icon" style="margin-left: 2vw;"  src="../../images/slider5.jpg" width="30px" height="30px">
				<input id="liuyanMessage" style="color: #000000; width: 65vw; height: 7vw;margin-left:3vw;margin-top: 5vw; position: absolute; border-radius: 3vw;top: 2vw;" placeholder="看对眼就留个言吧" />
				<button id="btn" style="float: right; height: 7vw;line-height:2vw;margin-top: 1.5vw; margin-right: 5vw;background: #FFAA33;color:#fff;" >留言</button>
				<div id="liuyan">
					
				</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.js"></script>
	<script src="../../js/jquery-1.4.2.min.js"></script>
	<script src="../../js/template-web.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/config.js"></script>
	<script  type='text/html' id="tab-message">
		{{each childRespVos}}
		<div class="mui-col-sm-12 mui-col-xs-12">
			<li class="mui-table-view-cell recog" id="{{$value.id}}" data="{{$value}}">
				<img src="{{$value.imagePath}}" οnerrοr="imgerrorfun({{$value.imagePath}});"/>
				<span class="title">{{$value.name}}</span>
				<span class="mui-navigate-right">
				</span>
				<span class="xsd" style="">相似度： {{$value.score}}</span>
			</li>
		</div>
		{{/each}}
	</script>
	<script  type='text/html' id="tab-liuyan">
		{{each rows}}
		<li class="liuyan" style="margin-top: 2vw;" id="{{$value.id}}">
			<img class="user-icon" style="float: left;margin-left: 2vw;"  src="{{$value.userRespVo.headImageUrl}}" width="30px" height="30px">
			<div class=""style="float: left;margin-top: 1vw;" > 
				<span style="margin-left:2vw;font-size: 12px;">{{$value.userRespVo.nickname}}<span style="margin-left:2vw;font-size: 1px;">{{$value.createdTime}}</span></span>
			</div>
			<div style="float: left;width:80vw;font-size: 4vw;margin-left: 2vw;">
				{{$value.message}}
				{{if user($value.userRespVo.userId) }}
				<span onclick="deletedLy({{$value.id}})" style="font-size:2vw; margin-left:2vw;color:#FF2D2D;">删除</span>
				{{ /if }}
				
			</div>
			
		</li>
		{{/each}}
	</script>
	<script>
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					
					style: 'circle',
					callback: pulldownRefresh
				},
				up: {
					auto: true,
					style: 'circle',
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		
		options = {
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.5, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}
		var count = 0;
		var data = localStorage.getItem("shareDetailed");
		var imgUrl = JSON.parse(data).imageRecognitionRespVo.imagePath;
		$('#img').attr('src', imgUrl);
		$('#userImg').attr('src', JSON.parse(data).userRespVo.headImageUrl);
		$('#username').html(JSON.parse(data).userRespVo.nickname);
		$('#time').html(JSON.parse(data).createdTime);
		$('#title').html(JSON.parse(data).title);
		$('#message').html(JSON.parse(data).message);
		
		mui.ajax(app.getUrl()+"giveUp/getSize", {
			type: 'POST',
			dataType: 'json',
			contentType: "application/json;charset=UTF-8",
			data: JSON.parse(data).id,
			async: true,
			timeout: 100000, //超时时间设置为10秒；
			success: function(res) {
				if (res.errCode === "000000") {
				    $('#praised').html(res.data);
				}else {
					$('#praised').html(0);
				}
			},
			error: function(res) {
				modal.classList.add("mui-hidden");
				mui.alert('与服务器断开连接!请重新登录', function() {
					plus.webview.getWebviewById("share_detailed.html").close();
					plus.webview.getWebviewById("index").close();
				});
			}
		});
		
		
		var user = app.getUserInfo();
		$('#userIcon').attr('src', user.headImageUrl);
		htmlstr = template('tab-message', JSON.parse(data).imageRecognitionRespVo);
		var tul = document.getElementById("jieguo");
		tul.innerHTML = htmlstr;
		var btn = document.getElementById("btn");
		btn.addEventListener('click',function(){
			var message = document.getElementById("liuyanMessage").value;
			if(message.toString() == "") {
				mui.toast('请输入留言内容!', {
					duration: 'long',
					type: 'div'
				}) 
				return false;
			}
			console.log(JSON.parse(data).id);
			mui.ajax(app.getUrl()+"comments/save", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: {
					"message": message,
					 "invitationId": JSON.parse(data).id,
				},
				async: true,
				timeout: 100000, //超时时间设置为10秒；
				beforeSend: function() {
					plus.nativeUI.showWaiting("留言中...", "options");
					mask.show();
				},
				complete: function() {
						plus.nativeUI.closeWaiting();
						mask.close(); //关闭遮罩层
					},
				success: function(res) {
					if (res.errCode === "000000") {
					    mui.toast('留言成功!', {
					    	duration: 'long',
					    	type: 'div'
					    })
						pulldownRefresh();
					}else {
						mui.toast('留言失败!', {
							duration: 'long',
							type: 'div'
						})
					}
				},
				error: function(res) {
					modal.classList.add("mui-hidden");
					mui.alert('与服务器断开连接!请重新登录', function() {
						plus.webview.getWebviewById("share_detailed.html").close();
						plus.webview.getWebviewById("index").close();
					});
				}
			});
		})
		
		var count = 0;
		var pase = {
			page:0,
			rows:10,
			invitationId:JSON.parse(data).id
			};
		function init(data) {
			mui.ajax(app.getUrl() + "comments/findPage", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: data,
				success: function(res) {
					if (res.errCode === "000000") {
						$('#total').html(res.data.total);
					    htmlstr = template('tab-liuyan', res.data);
						var tul = document.getElementById("liuyan");
						tul.innerHTML += htmlstr;
						if(res.data.total < pase.rows || res.data.rows.length <= 0) {
							mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
						}
					}
				},
				error: function(res) {
					mui.alert('与服务器断开连接!请重新登录', function() {
						// plus.webview.getWebviewById("index").close();
					});
				}
			});
		}
		
		function pullupRefresh() {
				pase.page += 1;
				init(pase);
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(count > 0);
		}
		
		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			var tul = document.getElementById("liuyan");
			count = 0;
			tul.innerHTML = "";
			pase.page = 0;
			init(pase);
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			mui('#refreshContainer').pullRefresh().refresh(true);
			
		}
		mui.plusReady(function() {
			//识别结果 
			mui("#jieguo").on('tap', '.mui-table-view-cell', function() {
			var data = this.getAttribute("data");
			console.log(data);
			localStorage.setItem("childData",data);
			var html = '../recognition/recoginition-deail.html';
			w = plus.webview.create(html, html, {
				hardwareAccelerated: true,
				scrollIndicator: 'none',
				scalable: true,
				bounce: 'all'
			});
			w.show('pop-in');
		});
		
		
		
		var parse = document.getElementById("parse");
		parse.addEventListener('click',function(){
			mui.ajax(app.getUrl() + "giveUp/getParse", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: JSON.parse(data).id,
				success: function(res) {
					if (res.errCode === "000000") {
						$('#praised').html(res.data);
						getBoolean();
					}
				},
				error: function(res) {
					mui.alert('与服务器断开连接!请重新登录', function() {
						// plus.webview.getWebviewById("index").close();
					});
				}
			});
		})
		getBoolean();
		function getBoolean() {
			mui.ajax(app.getUrl() + "giveUp/getBoolean", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: JSON.parse(data).id,
				success: function(res) {
				console.log(JSON.stringify(res))
					if (res.errCode === "000000") {
						if(res.data) {
							parse.classList.add("parse");
						}else {
							parse.classList.remove("parse");
						}
						  
					}
				},
				error: function(res) {
					mui.alert('与服务器断开连接!请重新登录', function() {
						// plus.webview.getWebviewById("index").close();
					});
				}
			});
		}
		
		template.defaults.imports.user = function(userId) {
			return userId == app.getUserInfo().userId;
		}
		});
		function deletedLy(id) {
			mui.ajax(app.getUrl() + "comments/remove", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: id,
				success: function(res) {
				console.log(JSON.stringify(res))
					if (res.errCode === "000000") {
						pulldownRefresh()
						  
					}
				},
				error: function(res) {
					mui.alert('与服务器断开连接!请重新登录', function() {
						// plus.webview.getWebviewById("index").close();
					});
				}
			});
		}
	</script>
</html>
